import React from 'react';
import Loadable from 'react-loadable';

// 通用的过场组件
const loadingComponent = (props) => {
    if(props.error){
        return <div className="fl-center" style={{height:"100vh"}}>页面加载失败，<a className="link" onClick={()=>(window.location.href="/")}>返回</a></div>
    }else if(props.pastDelay){
        return <div className="fl-center" style={{height:"100vh"}}>loading ...</div>
    }else{
        return null;
    }
}

let cacheComponent = loadingComponent;

// 过场组件默认采用通用的，若传入了loading，则采用传入的过场组件
export const loadable = (loader) => {
    setTimeout(()=>{// 延迟加载
        cacheComponent = ()=>loader;
    },80)

    return Loadable({
        loader:()=>loader,
        loading: cacheComponent,
        //delay: 0
    });
}
